<template>
  <div>{{counter.count}}</div>
  <div>{{counter.doubleCount}}</div>
  <button @click="changeCount">点击</button>
</template>

<script setup lang="ts">
import { useCounterStore } from "@/stores/counter";
let counter = useCounterStore()

// 更改state不需要在去通过mutions（本来也没有），pinia可以直接修改状态，并且dev tools可以捕获到状态的改变 
// 更改state的3种方式
let changeCount = () => {
  // 1.
  // counter.count++; //可以通过state实例访问状态来直接读取和写入状态
  // 2.actions
  counter.increment() // 通过调用store实例的方法可以去更改实例上的数据
  // 3.
  // counter.$patch({
  //   count: counter.count + 1
  // })
}
</script>
<style>

</style>
